<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薇简历</title>
</head>
<link rel="shortcut icon" href="./libs/img/logo.ico" type="image/x-icon">
<link rel="stylesheet" href="./libs/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./libs/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./libs/css/reset.css">
<link rel="stylesheet" href="./libs/css/index.css">

<body>
    <!-- 侧边栏 -->
    <aside class="asideBar">
        <div class="logo">
            <img src="./libs/img/logo.png" alt="">
        </div>
        <div class="avatar">
            <div class="avatar-border">
                <img src="./libs/img/avatar.jpg" alt="">
            </div>
        </div>
        <div class="nav">
            <a href="#info">关于我</a>
            <a href="#skills">技能介绍</a>
            <a href="#works">往期作品</a>
            <a href="javascript:;">联系我吧</a>
        </div>
    </aside>

    <!-- 主要内容 -->
    <main>
        <!-- 1、0关于我 -->
        <section class="aboutMe" id="info">
            <div class="wrap">
                <h2 class="title">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <span>关于我</span>
                    <i>/about me</i>
                </h2>

                <div class="row">

                    <div class="col-sm-6">
                        <ul>
                            <li>姓名：孙薇</li>
                            <li>性别：男</li>
                            <li>年龄：21</li>
                            <li>民族：汉</li>
                            <li>籍贯：江西</li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul>
                            <li>电话：18870232324</li>
                            <li>QQ：2363816146</li>
                            <li>教育
                                <span>
                                    <img src="./libs/img/jiaoyu.png" alt="">
                                </span>
                                经历：九江职业技术学院
                            </li>
                            <li>邮箱：<a href="mailto:2363816146@qq.com">2363816146@qq.com</a></li>
                            <li>gitHub：<a href="https://gitubsunwei.github.io/" target="_blank">gitubsunwei.github.io</a></li>
                        </ul>
                    </div>

                </div>

            </div>
        </section>
        <!-- 2、0掌握的技能 -->
        <section class="master-skills" id="skills">
            <div class="wrap">
                <h2 class="title">
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                    掌握的技能
                </h2>
                <div class="row srcollable">
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-4 row-item">
                        <div class="skill-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skill-title">
                            <h3>HTML 5</h3>
                            <p>熟悉使用HTML5网站的架构和开发</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 3、0个人作品 -->
        <section class="works" id="works">
            <div class="wrap">
                <h2>
                    <i class="fa fa-trophy" aria-hidden="true"></i>
                    个人作品
                </h2>
                <!-- Vue的作品 -->
                <div class="row">
                    <h3>Vue项目</h3>
                    <div class="col-sm-6">
                        <a href="./Vue/novel/index.html">
                            <div class="works-item">
                                <img src="./Vue/novel/小说.png" alt="">
                            </div>
                            <p>书客小说</p>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="./Vue/yinpin/index.html">
                            <div class="works-item">
                                <img src="./Vue/yinpin/coffee.png" alt="">
                            </div>
                            <p>七里飘香</p>
                        </a>
                    </div>
                </div>
                <!-- javascript的作品 -->
                <div class="row">
                    <h3>javaScript</h3>
                    <div class="col-sm-6">
                        <a href="./js/Sokoban/index.html">
                            <div class="works-item">
                                <img src="./js/Sokoban/img/txz.png" alt="">
                            </div>
                            <p>推箱子游戏</p>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="./js/js放大镜/Mglass.html">
                            <div class="works-item">
                                <img src="./js/js放大镜/img/fdj.png" alt="">
                            </div>
                            <p>淘宝放大镜</p>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="./js/弹幕/弹幕.html">
                            <div class="works-item">
                                <img src="./js/弹幕/弹幕.png" alt="">
                            </div>
                            <p>弹幕效果</p>
                        </a>
                    </div>
                </div>
                <!-- HTML5的作品 -->
                <div class="row">
                    <h3>HTML5</h3>
                    <div class="col-sm-6">
                        <a href="./html5/冒泡进度条.html">
                            <div class="works-item">
                                <img src="./html5/进度条.png" alt="">
                            </div>
                            <p>冒泡进度条</p>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="./html5/饼状图.html">
                            <div class="works-item">
                                <img src="./html5/饼状图.png" alt="">
                            </div>
                            <p>canvas的饼状图</p>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="./libs/jquery/jquery-3.4.1.min.js"></script>
    <script src="./libs/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script>
        //jquery
        $(".nav a").bind("click touch", function () {
            //根据a标签的href转换为id选择器，获取id元素所处的位置
            $('html,body').animate({ scrollTop: ($($(this).attr('href')).offset().top) }, 500);
        });
    </script>
</body>

</html>